<template>
	<div class="profile">
		<el-card class="profile-card">
			<div slot="header" class="profile-header">
				<el-avatar :src="avatar" size="large"></el-avatar>
				<div class="profile-name">{{ name }}</div>
			</div>
			<div class="profile-body">
				<el-tabs v-model="activeTab">
					<el-tab-pane label="个人资料">
						<el-form :model="formData" :rules="rules" ref="form" label-width="100px">
							<el-form-item label="用户名" prop="username">
								<el-input v-model="formData.username" disabled></el-input>
							</el-form-item>
							<el-form-item label="邮箱" prop="email">
								<el-input v-model="formData.email"></el-input>
							</el-form-item>
							<el-form-item label="手机号" prop="phone">
								<el-input v-model="formData.phone"></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="submitForm('form')">保存</el-button>
							</el-form-item>
						</el-form>
					</el-tab-pane>
					<el-tab-pane label="会员积分">
						<view class="container">
							<view class="header">
								<view class="header-left">
									<view class="top">
										今日收益
									</view>
									<view class="center">
										33 <text class="text">元</text>
									</view>
									<view class="bottom">
										每日凌晨自动更新
									</view>
								</view>
								<view class="header-right">
									<view class="top">
										可服务时间
									</view>
									<view class="center">
										32分钟
										<!-- 2 <text class="text">天</text>
										18 <text class="text">小时</text> -->
									</view>
									<view class="bottom">
										可用积分666
									</view>
								</view>
							</view>
							<view class="body-center">
								<view class="top">
									<view class="box">
										<view class="box-1">
											收益总金额(元)
										</view>
										<view class="box-2">
											20.01 <text class="text">元</text>
										</view>
									</view>
									<view class="box">
										<view class="box-1">
											在线总时长
										</view>
										<view class="box-2">
											1年3月12天
										</view>
									</view>
									<view class="box">
										<view class="box-1">
											日均收益(元)
										</view>
										<view class="box-2">
											33.2
										</view>
									</view>
									<view class="box">
										<view class="box-1">
											昨日收益(元)
										</view>
										<view class="box-2">
											33.2
										</view>
									</view>
								</view>
							</view>

						</view>
					</el-tab-pane>
					<el-tab-pane label="更改密码">
						<el-form :model="passwordForm" :rules="passwordRules" ref="passwordForm" label-width="100px">
							<el-form-item label="旧密码" prop="oldPassword">
								<el-input type="password" v-model="passwordForm.oldPassword"></el-input>
							</el-form-item>
							<el-form-item label="新密码" prop="newPassword">
								<el-input type="password" v-model="passwordForm.newPassword"></el-input>
							</el-form-item>
							<el-form-item label="确认密码" prop="confirmPassword">
								<el-input type="password" v-model="passwordForm.confirmPassword"></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="submitForm('passwordForm')">保存</el-button>
							</el-form-item>
						</el-form>
					</el-tab-pane>
				</el-tabs>
			</div>
		</el-card>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: '1',
				formData: {
					username: 'admin',
					email: 'admin@example.com',
					phone: '1234567890'
				},
				rules: {
					email: [{
							required: true,
							message: '请输入邮箱',
							trigger: 'blur'
						},
						{
							type: 'email',
							message: '请输入正确的邮箱地址',
							trigger: ['blur', 'change']
						}
					],
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: 'blur'
						},
						{
							pattern: /^1[3456789]\d{9}$/,
							message: '请输入正确的手机号',
							trigger: ['blur', 'change']
						}
					]
				},
				passwordForm: {
					oldPassword: '',
					newPassword: '',
					confirmPassword: ''
				},
				passwordRules: {
					oldPassword: [{
						required: true,
						message: '请输入旧密码',
						trigger: 'blur'
					}],
					newPassword: [{
							required: true,
							message: '请输入新密码',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 20,
							message: '密码长度在6到20个字符之间',
							trigger: 'blur'
						}
					],
					confirmPassword: [{
							required: true,
							message: '请确认密码',
							trigger: 'blur'
						},
						{
							validator: this.validateConfirmPassword,
							trigger: 'blur'
						}
					]
				},
				videoList: [{
						name: '视频1',
						size: '100MB',
						date: '2021-10-01'
					},
					{
						name: '视频2',
						size: '200MB',
						date: '2021-10-02'
					},
					{
						name: '视频3',
						size: '300MB',
						date: '2021-10-03'
					}
				],
				avatar: 'https://avatars.githubusercontent.com/u/125264?s=200&v=4',
				name: 'admin'
			}
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate(valid => {
					if (valid) {
						this.$message.success('保存成功')
					}
				})
			},
			validateConfirmPassword(rule, value, callback) {
				if (value !== this.passwordForm.newPassword) {
					callback(new Error('两次输入的密码不一致'))
				} else {
					callback()
				}
			}
		}
	}

</script>

<style scoped>
	.profile {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}

	.profile-card {
		width: 100%;
	}

	.profile-header {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 20px;
	}

	.profile-name {
		font-size: 24px;
		margin-left: 20px;
	}

	.profile-body {
		padding: 20px;
	}

	.container {
		height: 100vh;
		background-image: linear-gradient(to bottom, rgb(234, 148, 0) 30%, #FFF 0);
	}

	.header {
		display: flex;
		/* padding: 20px; */


	}

	.header-left {
		width: 55%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;


	}

	.text {
		font-size: 12px;
	}

	.header-right {
		width: 45%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;


	}

	.top {}

	.center {
		font-size: 28px;

		.text {
			font-size: 12px;
		}
	}

	.body-center {
		height: 70%;
		border-radius: 10px;
		background: #fff;
		margin: 20px 0;
		border: 1px solid #dcdcdc;
		padding: 10px;
		display: flex;
		flex-direction: column;
	}

	.top {
		display: grid;
		grid-template-columns: 1fr 1fr;

	}

	.box {
		padding: 10px 3px;


	}

	.box-1 {
		font-size: 16px;

	}

	.box-2 {
		font-size: 22px;
		margin-top: 5px;
		font-weight: 600;
	}

</style>
